<!--
*@Author: QWP
*@Description: 文件列表中的预览展示
*@Date: 2024-09-03 10:00:08
-->
<template>
  <div class="u-file-msg-box" @click="showEcho = true">
    <div class="f-flex-row">
      <div class="u-file-name">{{ data['fileName'] }}</div>
      <a-image :src="getFileType" :preview="false" width="50px" height="56px"></a-image>
    </div>
  </div>

  <!-- 文件预览 -->
  <u-dialog v-model:open="showEcho"
    wrap-class-name="full-modal"
    :destroyOnClose="true"
    :hideBtns="['submit']">
    <template v-if="props.data['fileUrl']">
      <UploadEcho :path="props.data['fileUrl']"
        @echoClose="showEcho = false"/>
    </template>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { urlFile } from '@/util/common'
import UploadEcho from '@/views/common/UploadEcho.vue'
const props = defineProps<{
  data: object
}>()

const fileType = {
  'doc': 'word.png',
  'docx': 'word.png',
  'xls': 'excel.png',
  'xlsx': 'excel.png',
  'pdf': 'pdf.png',
  'ppt': 'ppt.png',
  'pptx': 'ppt.png',
}

const getFileType = computed(() => {
  let tData = props.data || {};
  let { fileUrl } = tData
  if(fileUrl) {
    let types = fileUrl.split('.')
    let type = fileType[types[types.length - 1]]
    return urlFile(`knowledge/${type}`)
  }
  return ''
})

const getFileName = computed(() => {
  let tData = props.data || {};
  let { fileUrl = '', fileName ='' } = tData
  let tFiles = fileUrl.split('/')
  return fileName
})

const showEcho = ref<boolean>(false)

</script>

<style lang='scss' scoped>
.u-file-msg-box {
  margin-inline: 2px;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .09);
  cursor: pointer;
  .u-file-name {
    width: 200px;
    word-break:break-all;
    margin: 0 12px 0 6px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
}
</style>